<template>
  <div class="flex items-center justify-center h-screen">
    <div class="flex mx-auto bg-white rounded py-10 text-[#444444]">
      <div class="w-[330px] box-border text-center pt-10">
        <div class="text-[#444444] font-bold">获取教程</div>
        <div class="text-sm pt-2 pb-6">微信扫码关注公众号</div>
        <div
          class="border border-gray rounded w-[50%] mx-auto overflow-hidden inline-block"
        >
          <img class="w-full" src="../assets/login/gzh_code.jpg" alt="" />
        </div>
        <div class="pt-4 font-bold text-sm">
          点击菜单[实战项目]获取本系列教程
        </div>
      </div>
      <div
        class="w-[400px] pl-10 pr-10 pb-3 border-box border-l border-l-2 border-gray"
      >
        <div class="font-bold mb-3">密码登录</div>
        <el-form :model="formLogin" :rules="loginRules">
          <el-form-item prop="username">
            <el-input
              class="h-[40px]"
              placeholder="请输入用户名"
              v-model="formLogin.username"
            />
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              class="h-[40px]"
              v-model="formLogin.password"
              type="password"
              placeholder="请输入密码"
            />
          </el-form-item>
          <el-checkbox v-model="isRemember" label="记住密码" size="large" />
          <el-button
            type="primary"
            class="w-full mt-5 !h-[40px]"
            @click="handleLogin"
            >登录</el-button
          >
        </el-form>
        <div class="flex items-center justify-between mt-4">
          <div class="w-[100px] border-t-2 border-gray"></div>
          <div class="text-[#999] text-[14px]">其它方式登录</div>
          <div class="w-[100px] border-t-2 border-gray"></div>
        </div>
        <div class="flex justify-around mt-4">
          <div class="bg-[#f5f5f5] rounded-full p-2">
            <wxIcon />
          </div>
          <div class="bg-[#f5f5f5] rounded-full p-2">
            <qqIcon />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>


<script setup lang="ts">
import wxIcon from '@/assets/svg/wx_icon.vue'
import qqIcon from '@/assets/svg/qq_icon.vue'

import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { handleEnter } from '@/utils/tools'

import useUserStore from '@/store/modules/user'

import { getToken, setToken } from '@/utils/tools/user'

import { userLogin } from '@/api/userApi'

import { LoginVo } from "./login.vo";

const userStore = useUserStore()

const router = useRouter()
const loading = ref(false)
const formLogin = reactive<LoginVo>({ username: "", password: "" });
const loginRules = reactive({
  username: [{ required: true, message: "用户名不可为空", trigger: "blur" }],
  password: [{ required: true, message: "密码不可为空", trigger: "blur" }],
})

const handleLogin = async () => {
  loading.value = true
  const accessToken = getToken()
  if (!accessToken) {
    const { data } = await userLogin(formLogin);
    setToken(data.access_token)
    userLoginFunc()
    return
  }
  userLoginFunc()
}

/**
 * 记住密码
 * @param account 账户密码
 */
 const rememberPassword = (account: LoginVo) => {
  Storage.set<LoginVo>("userAccount", account);
}
const isRemember = ref(false)

//获取记住的账户密码
const getRememberAccount = () => {
  const userAccount: LoginVo | null = userStore.userInfo;
  if (!userAccount) return;
  formLogin.username = userAccount.username;
  formLogin.password = userAccount.password;
  isRemember.value = true;
}

const userLoginFunc = () => {
  loading.value = false
  userStore.SET_USER_INFO({
    id: 1,
    username: 'test',
    nickname: '测试账号',
    roles: ['admin', 'test']
  })
  router.push({ path: '/home' })
}

onMounted(() => {
  handleEnter(handleLogin)
})

</script>

<style lang="scss" scoped>
.logo {
  margin-bottom: 20px;
  span {
    margin-left: 8px;
    font-size: 20px;
    color: #003574;
    font-weight: 700;
  }
}

.login-main {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: url('../../assets/vue.svg') no-repeat;
  background-size: 100% 100%;
}

.login-form {
  position: relative;
  top: -110px;
  background: #000;
  border-radius: 8px;

  ::v-deep(.el-form-item__label) {
    color: #fff;
  }
}

.login-btn {
  position: relative;
  z-index: 1;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  width: 100%;
  height: 40px;
  font-size: 14px;
  font-family: alliance, mono, sans-serif;
  color: #fff;
  background: transparent;
  border-radius: 0;
  transition: 
    background 0.3s ease-in-out, border-color 0.3s  ease-in-out, color 0.3s ease-in-out;
  font-weight: 600;
  line-height: 40px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  font-feature-settings: "salt" on, "ss01" on, "ss02" on;
  transition-property: background, border-color, color;
  transition-duration: 0.3s, 0.3s, 0.3s;
  transition-timing-function: ease-in-out, ease-in-out, ease-in-out;
}

.login-btn::before {
  position: absolute;
  top: 1px;
  left: 1px;
  z-index: -1;
  display: block;
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  background: #000;
  transition: background 0.3s ease-in-out;
  content: "";
  transform: translate3d(0, 0, 0);
}

.login-btn::after {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -3;
  display: block;
  width: 100%;
  height: 100%;
  background: 
    linear-gradient(
      269.16deg,
      #9867f0 -15.83%,
      #9867f0 -15.83%,
      #3bf0e4 -4.97%,
      #33ce43 15.69%,
      #b2f4b6 32.43%,
      #ffe580 50.09%,
      #ff7571 67.47%,
      #ff7270 84.13%,
      #ea5dad 105.13%,
      #c2a0fd 123.24%
    );
  background-position: 58% 50%;
  background-size: 500%;
  content: "";
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  animation: gradient-shift 30s ease infinite;
}

@keyframes gradient-shift {
  0% {
    background-position: 58% 50%;
  }

  25% {
    background-position: 100% 0%;
  }

  75% {
    background-position: 10% 50%;
  }

  100% {
    background-position: 58% 50%;
  }
}

.login-btn:hover::before {
  background: transparent;
}

.login-btn:hover {
  cursor: pointer;
  color: #000;
}
</style>
